<template>
    <div id="subPage">
        <div class="top">
            <div class="list tab" style="border-radius: 10px;">
                <div class="search-left">
                    <Tabs v-model="tabActiveName">
                        <TabPane :label="`全部（${checkNum>99?'99+':checkNum}）`" name="-1"></TabPane>
                        <TabPane :label="`未开始的（${notStartedNum>99?'99+':notStartedNum}）`" name="1"></TabPane>
                        <TabPane :label="`进行中（${underwayNum>99?'99+':underwayNum}）`" name="2"></TabPane>
                        <TabPane :label="`已完成（${doneNum>99?'99+':doneNum}）`" name="3"></TabPane>
                        <TabPane :label="`未发布（${unpublished>99?'99+':unpublished}）`" name="0"></TabPane>
                    </Tabs>
                </div>
                <div class="search-right">
                    <div class="operationBox">
                        <div class="tableBtn" v-if="auth.isAdd"  @click="$router.push({ path: '/quality/taskAdd' })">
                            <div class="btnBox">
                                <span class="el-icon-circle-plus-outline" style="font-size:0.2rem;margin-right:0.1rem;cursor:pointer;"></span>
                                <div class="text">检查任务</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list">
                <div class="item daterange">
                    <span class="name">发布时间：</span>
                    <DatePicker type="daterange" :options="options" :clearable="true" v-model="dateArr" v-if="inputShow" format="yyyy-MM-dd" placement="top" transfer  placeholder="请选择日期" style="width: 300px;" @on-change="getDateArr" ></DatePicker>
                    <DatePicker type="daterange" format="yyyy-MM-dd" placement="top"  placeholder="请选择日期" v-if="inputShow" style="opacity:0;position: absolute;top:-9999px;width:1px;"></DatePicker>
                </div>
                <div class="item">
                    <span class="name">任务名称搜索：</span>
                    <Input  placeholder="请输入" v-model="title" style="width: 200px;" clearable/>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="item">
                    <span class="name">超时状态：</span>
                    <Select v-model="overdue" clearable style="width:200px;" placeholder="请选择" filterable>
                        <Option v-for="(item , index) in overdueList" :value="item.id" :key="index">{{item.name}}</Option>
                    </Select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="item btnList">
                    <div class="button submit" @click="searchAll" v-preventReClick="1500">搜索</div>
                    <div class="button cancel" @click="clear">重置</div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="tableBox">
                <div class="tableList">
                    <el-table :data="list" style="width: 100%" :stripe="true">
                        <img src="./../../assets/images/common/rotary_nodata.png" style="width:3.9rem; height: 2.4rem;" />
                        <el-table-column prop="title" label="任务名称" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="userName" label="发布人" align="center"></el-table-column>
                        <el-table-column prop="publishTime" label="发布时间" align="center">
                            <template slot-scope="scope">
                                {{scope.row.publishTime ? scope.row.publishTime : '—'}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="state" label="状态"  align="center">
                            <template slot-scope="scope">
                                <div class="p">
                                    <span class="overdueTip" v-if="scope.row.overdue == 1">超</span>
                                    <span style="color:#A9B0BB;" v-if="scope.row.state == 0">未发布</span>
                                    <span style="color:#FFA64D;" v-if="scope.row.state == 1">未开始</span>
                                    <span style="color:#1891FF;" v-if="scope.row.state == 2">进行中</span>
                                    <span style="color:#28D79C;" v-if="scope.row.state == 3">已完成</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="progress" label="检查进度" align="center"> </el-table-column>
                        <el-table-column fixed="right" label="操作"  align="center" v-if="auth.isRelease||auth.isEdit||auth.isDelete">
                            <template slot-scope="scope">
                                <el-button v-if="auth.isRelease" @click="isReleaseFn(scope.row.taskId)" :disabled='scope.row.state != 0' type="text" size="small" v-preventReClick="1500" style="color:#00ACFB;">发布</el-button>
                                <el-button  v-if="auth.isEdit" @click="toDetails(scope.row)" type="text" size="small" v-preventReClick="1500" style="color:#00ACFB;">详情</el-button>
                                <el-button v-if="auth.isDelete" @click="remove(scope.row.taskId)"  :disabled='scope.row.state != 0' type="text" size="small" v-preventReClick="1500" style="color:#FF001E;">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix pageFix"   >
                    <div class="float-right">
                        <Page v-if="count" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="count" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false"  class-name="msgModal">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <div class="footer">
                    <div class="button cancel" @click="cancel(1)">取消</div>
                    <div class="button submit" @click="detele" v-preventReClick="1500">确定</div>
                </div >
            </div>
        </Modal>

        <Modal v-model="isReleaseModal" title="发布任务提示" width="500px;" :mask-closable="false" class-name="msgModal">
            <div style="width:100%;text-align:center;font-size:16px;color:#5E5F60;margin:20px auto;">
                您是否确认发布此检查任务？
            </div>
            <div slot="footer">
                <div class="footer">
                    <div class="button cancel" @click="cancel(0)">取消</div>
                    <div class="button submit" @click="submit" v-preventReClick="1500">确定</div>
                </div >
            </div>
        </Modal>
    </div>
</template>
<script>
import {
    getQualityTaskList,
    getQualityTaskNum,
    getQualityTaskRelease,
    getQualityTaskDel
} from '@/api/quality';
export default {
    data() {
        return {
            dateArr:[],
            btnList:[],
            tabActiveName:"-1",
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            current: 1,
            pageSize: 10,
            pageNum: 1,
            count: 0,
            list: [],
            state: 0,
            inputShow: false,
            isReleaseModal: false,
            deleteModal: false,
            overdueList:[
                {
                    id:0,
                    name:'正常检查'
                },
                {
                    id:1,
                    name:'超时检查'
                }
            ],
            taskId:'',
            title:'',
            overdue:'',
            deptId:'',
            checkNum:0,
            notStartedNum:0,
            underwayNum:0,
            doneNum:0,
            unpublished:0,
            auth:{
                isAdd:false,
                isEdit: false,
                isDelete:false,
                isRelease:false
            },
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.pageNum = 1;
                this.current = 1;
                this.dateArr = [];
                this.getAllList();
                this.getQualityTaskExecNumFn();
            }
        },
        tabActiveName(val ,oldVal){
            if(val != oldVal){
                this.pageNum = 1;
                this.current = 1;
                this.getAllList();
            }
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getAllList();
        this.getQualityTaskExecNumFn();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.initAuth() //初始化权限
        setTimeout(()=>{
            this.inputShow = true;
        },1)
    },
    methods: {
        initAuth(){
            this.auth.isAdd = this.btnList.includes('quality/checkTask/add')
            this.auth.isEdit = this.btnList.includes('quality/checkTask/edit')
            this.auth.isDelete = this.btnList.includes('quality/checkTask/del')
            this.auth.isRelease = this.btnList.includes('quality/checkTask/release')
        },
        // 点击前往详情
        toDetails(row){
            let obj = {
                taskId : row.taskId,
                state : row.state,
                title : row.title,
                content : row.content,
            };
            this.$router.push({ path: '/quality/taskDetails'});
            localStorage.setItem('taskDetailsObj',JSON.stringify(obj))
        },
        //删除
        remove(taskId) {
            this.deleteModal = true;
            this.taskId = taskId;
        },
        detele() {
            getQualityTaskDel(this.taskId)
                .then((res) => {
                    if (res.code == 200) {
                        this.deleteModal = false;
                        this.$Message.success("操作成功");
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        // 弹出弹框并保存检查任务id
        isReleaseFn(taskId){
            this.taskId = taskId;
            this.isReleaseModal = true;
        },
        // 提交任务发布
        submit() {
            let parmas = {
                taskId: this.taskId,
            };
            getQualityTaskRelease(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.pageNum = 1;
                        this.current = 1;
                        this.getAllList();
                        this.getQualityTaskExecNumFn();
                        this.isReleaseModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取列表
        getAllList() {
            let parmas = {
                deptId: this.deptId,
                title: this.title,
                overdue: this.overdue,
                state: this.tabActiveName == -1 ? '' : this.tabActiveName,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startTime: this.dateArr[0],
                endTime: this.dateArr[1],
                report: 2,
            };
            getQualityTaskList(parmas)
            .then(res => {
                if (res.code == 200) {
                    this.list = res.data.list;
                    this.count = res.data.total;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        // 获取数据统计
        getQualityTaskExecNumFn() {
            let parmas = {
                deptId: this.deptId,
                title: this.title,
                overdue: this.overdue,
                startTime: this.dateArr[0],
                endTime: this.dateArr[1],
            };
            getQualityTaskNum(parmas)
            .then(res => {
                if (res.code == 200) {
                    this.checkNum = res.data.checkNum || 0;
                    this.notStartedNum = res.data.notStartedNum || 0;
                    this.underwayNum = res.data.underwayNum || 0;
                    this.doneNum = res.data.doneNum || 0;
                    this.unpublished = res.data.unpublished || 0;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        searchAll() {
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
            this.getQualityTaskExecNumFn();
        },
        clear() {
            this.title = "";
            this.overdue = "";
            this.pageNum = 1;
            this.dateArr = [];
            this.getAllList();
            this.getQualityTaskExecNumFn();
        },
        getDateArr(i,v){
            this.dateArr = i;
        },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        // 公共关闭弹框
        cancel(type) {
            if (type == 0) {
                this.isReleaseModal = false;
            } else if (type == 1) {
                this.deleteModal = false;
            }
        },
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style scoped lang="scss">
@import "./../../assets/style/qualityAndSafety/modal.scss";
@import "./../../assets/style/qualityAndSafety/checktask.scss";
</style>
